<template>
  <div class="recommend">
    <div class="item">
      <div class="hint">推荐机遇</div>
      <!-- 推荐机遇区域 -->
      <div class="subItem" v-for="(item,index) in luckData" :key="item.id">
        <div class="index">{{index + 1 + '.'}}</div>
        <div class="tag flex8">
          <el-tag color="#008c8c" :key="tag" v-for="tag in item.content" effect="dark">{{tag}}</el-tag>
        </div>
        <div class="more flex2">
          <a @click="openDialog(item)">查询更多</a>
          <a @click="goLuck(item)">与其机遇</a>
        </div>
      </div>
      <!-- 当没有数据时显示 -->
      <div v-if="luckData.length === 0">暂时没有机遇信息,等会再来看吧</div>
      <!-- 对话框 -->
      <el-dialog title="用户其他信息" :visible.sync="centerDialogVisible" width="30%" center>
        <div class="userinfo">
          <!-- 头像 -->
          <img :src="userinfo.user_pic" alt="头像" v-if="userinfo.user_pic" />
          <div class="head_pic" v-else>该用户匿名了头像</div>
          <!-- 其他信息 -->
          <div class="info">
            <h3>昵称: {{userinfo.nickname?userinfo.nickname:'该用户匿名了昵称'}}</h3>
            <p>发布时间: {{userinfo.timer}}</p>
            <p>
              性别:
              <i class="iconfont icon-xingbienan" v-show="userinfo.gender === 1"></i>
              <i class="iconfont icon-xingbienv" v-show="userinfo.gender === 0"></i>
              {{userinfo.gender === 1?'男':userinfo.gender === 0?'女':'保密'}}
            </p>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// 引入第三方库dayjs
import dayjs from "dayjs";
export default {
  data() {
    return {
      centerDialogVisible: false, //控制对话框的显示
      isStart: false, //控制动画匹配
      num: 0, //页头
      luckData: [], //机遇数组
      userinfo: {}, //存储更多信息
      myuserinfo: {}, //我的机遇信息
    };
  },
  mounted() {
    // 获取推荐数据
    this.getluckBytimer();
    // 当页面加载完再去获取个人机遇信息
    this.$nextTick(() => {
      this.getluckinfo();
    });
  },
  methods: {
    // 点击匹配动画回调
    animation() {
      this.isStart = true;
    },
    // 获取推荐数据回调
    async getluckBytimer() {
      let result = await this.$API.getluckBytimer(this.num);
      // content字段是json格式
      if (result.code === 200) {
        result.data.forEach((item) => {
          item.content = JSON.parse(item.content);
        });
        this.luckData = result.data;
      }
    },
    // 打开对话框的回调
    openDialog(item) {
      this.centerDialogVisible = true;
      // 将数据给对话框数组
      this.userinfo = item;
    },
    // 获取个人机遇信息回调
    async getluckinfo() {
      // 查询个人机遇请求,有则插入我的关系数据表，没有则跳转到留下机遇模块
      let result = await this.$API.getluckinfo();
      if (result.code === 200) {
        // 插入与其机遇
        this.myuserinfo = result.data;
      }
    },
    // 与其机遇回调
    goLuck(item) {
      // 判断我的机遇信息是否有数据  收到的参数是他的机遇信息
      if (this.myuserinfo) {
        // 插入与其机遇
        this.happenluck(this.myuserinfo, item);
      } else {
        // 跳转到留下机遇
        this.$emit("goleave");
        // 提示
        this.$message("请先留下你的机遇再与人机遇哦");
      }
    },
    // 插入与其机遇回调
    async happenluck(mydata, hedata) {
      //第一个参数为我的数据,第二个为机遇用户数据
      //我们需要在我的关系表中,插入数据 里面需要收集 uuId/hhId 我/她的头像 主动id 我/她的昵称 我/她的性别 机遇时间
      //整理参数
      let {
        uuId,
        user_pic: myuser_pic,
        nickname: mynickname,
        gender: mygender,
      } = mydata; //解构我的数据
      let {
        uuId: hhId,
        user_pic: heuser_pic,
        nickname: henickname,
        gender: hegender,
      } = hedata; //解构机遇对象数据
      let data = {}; //需要传入服务器的值
      //将解构的全部值存放到data对象中
      Object.assign(data, {
        uuId,
        myuser_pic,
        mynickname,
        mygender,
        hhId,
        heuser_pic,
        henickname,
        hegender,
      });
      data.timer = dayjs().format("YYYY-MM-DD HH:mm:ss"); //时间
      data.driving = uuId; //推动者
      //  发送与其机遇请求
      let result = await this.$API.withhisluck(data);
      if (result.code === 200) {
        this.$message({
          type: "success",
          message: result.message,
        });
      } else {
        this.$message({
          type: "error",
          message: result.message,
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.recommend {
  .item {
    .hint {
      padding: 10px 0;
      color: #008c8c;
      font-weight: 700;
    }
    .subItem {
      height: 35px;
      line-height: 35px;
      padding: 10px 0;
      border-bottom: 1px dotted #008c8c;
      display: flex;
      justify-content: start;
      .flex2 {
        flex: 2;
      }
      .flex8 {
        flex: 8;
      }
      .more {
        text-align: center;
        a {
          margin-right: 10px;
          color: #008c8c;
          font-size: 14px;
          cursor: pointer;
        }
      }
      .index {
        margin-right: 10px;
        font-weight: 700;
        color: #008c8c;
      }
    }
    .userinfo {
      margin: 0 auto;
      text-align: center;
      img {
        max-width: 80%;
        max-height: 80%;
      }
      .user_pic {
        max-width: 80%;
        max-height: 80%;
        background: #ccc;
      }
      .info {
        h3 {
          color: #008c8c;
          font-size: 16px;
          font-weight: 700;
        }
        p {
          font-size: 12px;
        }
      }
    }
  }
}
</style>